import React from 'react'
import './Modify.less'
import Tit from '../../components/Tit'
import { Toast, InputItem } from 'antd-mobile'
export default class Modify extends React.Component {
    constructor(props) {
        super(props)
        this.fileInput = React.createRef();
        this.state = {
            user: null
        }
    }
    componentDidMount() {
        this.getD()
    }
    getD = () => {

        this.$getData('/api/user/getUserMsg', params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    this.setState({
                        user: params.data
                    })
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }
    change = (val) => {
        console.log(val)
        this.state.user.nickName = val
        this.setState({
            user: this.state.user
        })
    }
    upload = () => {
        Toast.loading('Loading...');
        if (this.fileInput.current.files[0] == undefined) {
            this.tijiao(null)
        }
        else {
            const data = new FormData();
            data.append('file', this.fileInput.current.files[0]);  //相当于 input:file 中的name属性
            fetch('http://192.168.1.188:8828/api/user/uploadImg', {
                method: 'POST',
                body: data
            }).then(response => {
                console.log(response)
                switch (response.code) {
                    case 100:
                        this.tijiao(response.data)
                        break;
                    default:
                        this.Toast.info(response.msg);
                        break;
                }
            })
        }
    }
    tijiao = (url) => {
        console.log(url)
        var data = { nickName: this.state.user.nickName, imageUrl: this.state.user.atavar, sex: this.state.user.sex }
        if (url === null) { }
        else { data.imageUrl = url }
        this.$postData('/api/user/updateUserInfo', data, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    this.Toast.info(params.msg);
                    this.getD()
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }
    render() {
        return (
            <div>{this.state.user ? <div className='modify'>
                <Tit zz={true} tit={'订单详情'}></Tit>
                <p className='Modify-p1' onClick={this.upload}>保存</p>
                <div className='Modify-d1 xin-center Modify-d3'>
                    <p>头像</p>
                    <img className='Modify-d1-i1' src={this.state.user.atavar} alt="" />
                    <input type="file" name='file' ref={this.fileInput} />
                    <img className='Modify-d1-i2' src={require('../../static/img/right4.png')} alt="" />
                </div>
                <div className='Modify-d1 xin-center'>
                    <p>昵称</p>
                    <InputItem
                        clear
                        placeholder="click the button below to focus"
                        // ref={el => this.inputRef = el}
                        value={this.state.user.nickName}
                        onChange={this.change}
                    ></InputItem>
                </div>
                <div className='Modify-d1 xin-center'>
                    <p>性别</p>
                    <div className='Modify-d2'>
                        <img src={require(`../../static/img/yuan${this.state.user.sex ? '-hov' : ''}.png`)} alt="" onClick={() => { this.state.user.sex = 1; this.setState({ user: this.state.user }) }} />
                        <p onClick={() => { this.state.user.sex = 1; this.setState({ user: this.state.user }) }} >男</p>
                        <img onClick={() => { this.state.user.sex = 0; this.setState({ user: this.state.user }) }} src={require(`../../static/img/yuan${this.state.user.sex ? '' : '-hov'}.png`)} alt="" />
                        <p onClick={() => { this.state.user.sex = 0; this.setState({ user: this.state.user }) }} >女</p>
                    </div>
                </div>
            </div> : <div></div>}</div>

        )
    }
}